<template>
  <!--  <page-layout :title="description">-->
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="客户业务编号" style="margin-bottom: 5px">
              <a-input placeholder="请输入编号" v-model="queryParam.customerNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="订单编号" style="margin-bottom: 5px">
              <a-input placeholder="请输入编号" v-model="queryParam.orderNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="主单号" style="margin-bottom: 5px">
              <a-input placeholder="请输入主单号" v-model="queryParam.mainOffNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="分单号" style="margin-bottom: 5px">
              <a-input placeholder="请输入分单号" v-model="queryParam.otherOffNumber"></a-input>
            </a-form-item>
          </a-col>
          <!--          <template v-if="toggleSearchStatus">-->

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="箱号" style="margin-bottom: 5px">
              <a-input placeholder="请输入箱号" v-model="queryParam.boxInfo"></a-input>
            </a-form-item>
          </a-col>
          <!--          </template>-->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery1" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!--              <a @click="handleToggleSearch" style="margin-left: 8px">-->
              <!--                {{ toggleSearchStatus ? '收起' : '展开' }}-->
              <!--                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />-->
              <!--              </a>-->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <div>
      <a-collapse accordion defaultActiveKey="1">
        <a-collapse-panel key="1" header="查询结果（点击表格中数据即可查看相应的费用明细信息）" style="margin-bottom: 15px">
          <a-table
            ref="table"
            :scroll="{x:1500,y:200}"
            size="small"
            bordered
            rowKey="id"
            :pagination="false"
            :columns="columns"
            :components="components"
            :dataSource="dataSource"
            :loading="loading"
            class="j-table-force-nowrap"
            :customRow="click"
            :rowClassName="rowClassName">
          </a-table>
        </a-collapse-panel>
      </a-collapse>
      <!-- 使用ag-grid-vue组件 其中columnDefs为列，rowData为表格数据 -->
      <!--      <ag-grid-vue-->
      <!--        style="width: 100%; height: 300px;"-->
      <!--        class="ag-theme-alpine"-->
      <!--        :headerHeight="36"-->
      <!--        :rowHeight="36"-->
      <!--        @grid-ready="onGridReady"-->
      <!--        :columnDefs="columnDefs"-->
      <!--        :rowData="dataSource"-->
      <!--      ></ag-grid-vue>-->
    </div>
    <a-spin :spinning="confirmLoading">
      <div class="box" title="应收明细">
        <j-vxe-table
          size="mini"
          ref="receivableTable"
          row-number
          row-selection
          resizable
          keep-source
          :loading="confirmLoading"
          :height="300"
          :dataSource="receivableList"
          :columns="receiveCol"
          style="margin:18px 10px 10px 10px"
          @selectRowChange="handleSelectRowChange"
          :cell-style='cellStyle'
          bordered
        >
          <template v-slot:toolbarAfter>
            <a-button style="margin-bottom: 10px;margin-right: 10px" @click="submitsh1(1)" icon="check" type="primary">
              审核通过
            </a-button>
            <a-button @click="submitsh1(2)" type="danger" ghost icon="close">驳回</a-button>
            <a-button @click="submitsh1(3)" style="margin-left: 10px" icon="rollback">撤销审核</a-button>
          </template>

        </j-vxe-table>
      </div>
      <div style="height: 20px"></div>
      <div class="box" title="应付明细">
        <j-vxe-table
          ref="payTable"
          size="mini"
          resizable
          row-number
          row-selection
          :loading="confirmLoading"
          keep-source
          :height="300"
          :dataSource="payList"
          :columns="payCol"
          style="margin:18px 10px 10px 10px"
          @selectRowChange="handleSelectRowChange2"
          :cell-style='cellStyle'
          bordered
        >
          <template v-slot:toolbarAfter style="margin-top: 18px">
            <a-button style="margin-bottom: 10px;margin-right: 10px;" @click="submitsh2(1)" icon="check" type="primary">
              审核通过
            </a-button>
            <a-button @click="submitsh2(2)" type="danger" ghost icon="close">驳回</a-button>
            <a-button @click="submitsh2(3)" style="margin-left: 10px" icon="rollback">撤销审核</a-button>
          </template>
        </j-vxe-table>
      </div>

    </a-spin>
  </a-card>
  <!--  </page-layout>-->
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate.vue'
import PageLayout from '@/components/page/PageLayout'
import Vue from 'vue'
import { getAction, postAction } from '@/api/manage'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
// import { AgGridVue } from 'ag-grid-vue'

export default {
  name: 'ShipExportList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDate,
    PageLayout
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
          const col = this.columns.find(col => {
            const k = col.dataIndex || col.key
            return k === key
          })
          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children])
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 1)
              }
            }
          }
          let a = Vue.ls.get('Login_Userinfo')
          sessionStorage.setItem('bill_manager::' + a.username, JSON.stringify(this.columns))
          const drag = h('vue-draggable-resizable', { ...dragProps })
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
        }
      }
    }
    return {
      // gridOptions: null,
      // gridApi: null,
      // columnApi: null,
      // defaultColDef: null,
      // sideBar: null,
      // rowGroupPanelShow: null,
      // pivotPanelShow: null,
      // localeTextFunc: null,

      dataSource: [],
      expenseVisible: false,
      addModalVisible: false,
      description: '费用审核',
      actionColumn: {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        fixed: 'right',
        width: 147,
        scopedSlots: { customRender: 'action' }
      },
      //列设置
      settingColumns: [],
      columns: [],
      // 表头
      defColumns: [
        // {
        //   title: '#',
        //   dataIndex: 'rowIndex',
        //   key: 'rowIndex',
        //   width: 60,
        //   align: 'center',
        //   customRender: function(t, r, index) {
        //     return parseInt(index) + 1
        //   },
        //   fixed: 'left'
        // },
        {
          title: '客户业务编号',
          align: 'left',
          width: 160,
          dataIndex: 'customerNumber',
          ellipsis: true,
          fixed: 'left'
        }, {
          title: '主单号',
          align: 'center',
          width: 160,
          dataIndex: 'mainOffNumber',
          ellipsis: true
        },
        {
          title: '分单号',
          align: 'center',
          width: 160,
          dataIndex: 'otherOffNumber',
          ellipsis: true
        }, {
          title: '起运港',
          align: 'center',
          width: 200,
          dataIndex: 'polRemark',
          ellipsis: true
        },
        {
          title: '卸货港',
          align: 'center',
          width: 200,
          dataIndex: 'podRemark',
          ellipsis: true
        }, {
          title: '交货地',
          align: 'center',
          width: 200,
          dataIndex: 'placeDeliveryDesc',
          ellipsis: true
        }, {
          title: 'ETD',
          align: 'center',
          width: 200,
          dataIndex: 'etd',
          ellipsis: true
        },
        {
          title: '装运方式',
          align: 'center',
          width: 200,
          dataIndex: 'shipmentMode',
          ellipsis: true
        },
        {
          title: '箱型箱量',
          align: 'center',
          width: 200,
          dataIndex: 'boxSize',
          ellipsis: true
        },
        {
          title: '委托单位',
          align: 'center',
          width: 160,
          dataIndex: 'entrustCompany',
          ellipsis: true
        },
        {
          title: '订舱代理',
          align: 'center',
          width: 160,
          dataIndex: 'bookingAgent',
          ellipsis: true
        },
        {
          title: '船公司',
          align: 'center',
          width: 160,
          dataIndex: 'shipCompany',
          ellipsis: true
        },
        {
          title: '操作人员',
          align: 'center',
          width: 160,
          dataIndex: 'operator',
          ellipsis: true
        },
        {
          title: '业务人员',
          align: 'center',
          width: 160,
          dataIndex: 'busPersonnel',
          ellipsis: true
        },
        {
          title: '客服人员',
          align: 'center',
          width: 160,
          dataIndex: 'cusServiceStaff',
          ellipsis: true
        }
      ],
      // columnDefs: [
      //   // {
      //   //   title: '#',
      //   //   dataIndex: 'rowIndex',
      //   //   key: 'rowIndex',
      //   //   width: 60,
      //   //   align: 'center',
      //   //   customRender: function(t, r, index) {
      //   //     return parseInt(index) + 1
      //   //   },
      //   //   fixed: 'left'
      //   // },
      //   {
      //     headerName: '客户业务编号',
      //     field: 'customerNumber',
      //     checkboxSelection: true,
      //     'pinned': 'left'
      //
      //   }, {
      //     headerName: '主单号',
      //     field: 'mainOffNumber'
      //   },
      //   {
      //     headerName: '分单号',
      //     field: 'otherOffNumber'
      //   }, {
      //     headerName: '起运港',
      //     field: 'polRemark'
      //   },
      //   {
      //     headerName: '卸货港',
      //     field: 'podRemark'
      //   }, {
      //     headerName: '交货地',
      //     field: 'placeDeliveryDesc'
      //   }, {
      //     headerName: 'ETD',
      //     field: 'etd'
      //   },
      //   {
      //     headerName: '装运方式',
      //     field: 'shipmentMode'
      //   },
      //   {
      //     headerName: '箱型箱量',
      //     field: 'boxSize'
      //   },
      //   {
      //     headerName: '委托单位',
      //     field: 'entrustCompany'
      //   },
      //   {
      //     headerName: '订舱代理',
      //     field: 'bookingAgent'
      //   },
      //   {
      //     headerName: '船公司',
      //     field: 'shipCompany'
      //   },
      //   {
      //     headerName: '操作人员',
      //     field: 'operator'
      //   },
      //   {
      //     headerName: '业务人员',
      //     field: 'busPersonnel'
      //   },
      //   {
      //     headerName: '客服人员',
      //     field: 'cusServiceStaff'
      //   }
      // ],
      confirmLoading: false,
      receiveCol: [
        {
          title: '费用状态',
          key: 'status',
          type: JVXETypes.normal,
          width: '200px',
          defaultValue: '录入状态'
        },
        {
          title: '费用名称',
          key: 'costName',
          type: JVXETypes.normal,
          width: '200px',
          align: 'center'
        },
        {
          title: '结算单位',
          key: 'settlementCompany',
          type: JVXETypes.normal,
          slotName: 'jsdw',
          width: '220px'
        },
        {
          title: '计费单位',
          key: 'chargingUnit',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '币种',
          key: 'currency',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '单价',
          key: 'price',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '数量',
          key: 'num',
          type: JVXETypes.normal,
          width: '180px'

        },
        {
          title: '汇率',
          key: 'rate',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '总价',
          key: 'totalPrice',
          type: JVXETypes.normal,
          width: '180px',
          defaultValue: '0'
        },
        // {
        //   title: '账单号',
        //   key: 'billNumber',
        //   type: JVXETypes.normal,
        //   width: '200px'
        // },
        {
          title: '发票号',
          key: 'invoiceNumber',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '备注',
          key: 'remark',
          type: JVXETypes.normal,
          width: '200px'
        }
      ],
      payCol: [
        {
          title: '费用状态',
          key: 'status',
          type: JVXETypes.normal,
          width: '200px',
          defaultValue: '录入状态'
        },
        {
          title: '费用名称',
          key: 'costName',
          type: JVXETypes.normal,
          width: '200px',
          align: 'center'
        },
        {
          title: '结算单位',
          key: 'settlementCompany',
          type: JVXETypes.normal,
          slotName: 'jsdw',
          width: '220px'
        },
        {
          title: '计费单位',
          key: 'chargingUnit',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '币种',
          key: 'currency',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '单价',
          key: 'price',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '数量',
          key: 'num',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '汇率',
          key: 'rate',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '总价',
          key: 'totalPrice',
          type: JVXETypes.normal,
          width: '180px',
          defaultValue: '0'
        },
        // {
        //   title: '账单号',
        //   key: 'billNumber',
        //   type: JVXETypes.normal,
        //   width: '200px'
        // },
        {
          title: '发票号',
          key: 'invoiceNumber',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '备注',
          key: 'remark',
          type: JVXETypes.normal,
          width: '200px'
        }
      ],
      receivableList: [],
      payList: [],
      // 选择的行
      selectedRows: [],
      selectedRows2: [],
      url: {
        list: '/box.ship/shipInfo/list',
        delete: '/box.ship/shipInfo/delete',
        deleteBatch: '/box.ship/shipInfo/deleteBatch',
        exportXlsUrl: '/box.ship/shipInfo/exportXls',
        importExcelUrl: '/box.ship/shipInfo/importExcel',
        queryById: '/box.ship/shipInfo/cost/queryCheckList',
        passurl: '/box.ship/shipInfo/cost/check'

      },
      dictOptions: {},
      selectid: ''
    }
  },
  created() {
    this.loading = true
    this.initColumns()
  },
  // beforeMount() {
  //   this.gridOptions = {}
  //   this.defaultColDef = {
  //     width: 120,
  //     resizable: true,
  //     sortable: true,
  //     enableRowGroup: true,
  //     enablePivot: true,
  //     enableValue: true
  //   }
  //   this.sideBar = { toolPanels: ['columns'] }
  //   this.rowGroupPanelShow = 'always'
  //   this.pivotPanelShow = 'always'
  //   this.localeTextFunc = (key, defaultValue) => {
  //     if (defaultValue == 'Copy') {
  //       return '复制'
  //     } else {
  //       return defaultValue ? defaultValue : ''
  //     }
  //   }
  // },
  // mounted() {
  //   this.gridApi = this.gridOptions.api
  //   this.gridColumnApi = this.gridOptions.columnApi
  // },
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // },
  },
  methods: {
    // onGridReady(params) {
    //   // 获取gridApi
    //   this.gridApi = params.api
    //   this.columnApi = params.columnApi
    //   // 这时就可以通过gridApi调用ag-grid的传统方法了
    //   this.gridApi.sizeColumnsToFit()
    // },
    searchQuery1() {
      this.loadData(1)
      this.receivableList = [],
        this.payList = [],
        this.selectid = ''
    },
    close() {
      this.expenseVisible = false
    },
    initDictConfig() {
    },
    handleBoxInfo() {

    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      // this.defColumns = colAuthFilter(this.defColumns, 'testdemo:')
      let a = Vue.ls.get('Login_Userinfo')
      let aa = sessionStorage.getItem('bill_manager::' + a.username)
      console.log(aa)
      if (aa) {
        this.defColumns = JSON.parse(aa)
      }
      var key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function(item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    },
    click(record, index) {
      return {
        on: {
          click: () => {
            this.dataSource.map((item) => {
              item.isclick = false

            })
            record.isclick = true
            this.selectid = record.id
            this.selectAll(record.id)
          }
        }
      }
    },
    selectAll(val) {
      var that = this
      that.confirmLoading = true
      let params = { 'shipId': val }
      getAction(this.url.queryById, params).then((res) => {
        if (res.success) {
          that.receivableList = res.result.ysList
          that.payList = res.result.yfList
          that.selectedRows = []
          that.selectedRows2 = []
          that.$refs.receivableTable.clearSelection()
          that.$refs.payTable.clearSelection()
          // that.selectedRows
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    showDrawer(val) {

      this.expenseVisible = true
      this.$nextTick(() => {
        this.$refs.expenseEntrysh.questId(val)
      })
    },
    onClose() {
      this.expenseVisible = false
    },
    recCheckboxkMethod({ row }) {
      return row.scode != 2
    },
    recactiveCellMethod({ row, rowIndex }) {
      if (row.scode != 2) {
        return true
      }
      return false
    },
    payCheckboxkMethod({ row }) {
      return row.scode != 2
    },
    payactiveCellMethod({ row, rowIndex }) {
      if (row.scode != 2) {
        return true
      }
      return false
    },
    exportDataEvent(val) {

    },
    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {

      this.selectedRows = event.selectedRows
      // if (this.selectedRows.length > 0) {
      //   this.isdelete = true
      // } else {
      //   this.isdelete = false
      // }
    },
    // 当选择的行变化时触发的事件
    handleSelectRowChange2(event) {
      this.selectedRows2 = event.selectedRows
      console.log(this.selectedRows)
    },
    cellStyle(row) {
      // console.log(row.row);
      if (row.row.scode == 3 || row.row.scode == 4 || row.row.scode == 5) {//判断条件，如果想要改变其他行样式，就写那一行的下标
        return `background-color: #9bcb40 !important; color: #777777`
      } else if (row.row.scode == 6 || row.row.scode == 7) {//判断条件，如果想要改变其他行样式，就写那一行的下标
        return `background-color: #8acff8 !important; color: #777777`
      } else {
        return `background-color: #f9e37f !important; color: #777777`
      }
    },
    rowClassName(record, index) {
      let className = 'light-row'
      if (record.isclick) className = 'dark-row '
      return className
    },
    submitsh1(val) {
      if (this.selectedRows.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      //1代表通过审核 2代表驳回
      var that = this
      let ids = []
      for (var i = 0; i < this.selectedRows.length; i++) {
        ids.push(this.selectedRows[i].id)
      }
      let type = ''
      if (val == 1) {
        type = '1'

      } else if (val == 2) {
        type = '2'
        for (var i = 0; i < this.selectedRows.length; i++) {
          if (this.selectedRows[i].scode == 3 || this.selectedRows[i].scode == 4 || this.selectedRows[i].scode == 5) {
            this.$message.warning('只用审核中数据才可驳回')
            return
          }
        }
      } else if (val == 3) {
        type = '3'
        for (var i = 0; i < this.selectedRows.length; i++) {
          if (this.selectedRows[i].scode != 3) {
            this.$message.warning('只用审核通过数据才可撤销审核')
            return
          }
        }
      }
      let param = {
        ids: ids,
        type: type
      }
      that.confirmLoading = true
      postAction(this.url.passurl, param).then(res => {
        console.log(res)
        if (res.success) {
          that.$message.success(res.message)

          that.selectAll(that.selectid)
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })

    },
    submitsh2(val) {
      if (this.selectedRows2.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      //1代表通过审核 2代表驳回
      var that = this
      let ids = []
      for (var i = 0; i < this.selectedRows2.length; i++) {
        ids.push(this.selectedRows2[i].id)
      }
      console.log('ds: ', ids)
      let type = ''
      if (val == 1) {
        type = '1'
      } else if (val == 2) {
        type = '2'
        for (var i = 0; i < this.selectedRows2.length; i++) {
          if (this.selectedRows2[i].scode == 3 || this.selectedRows2[i].scode == 4 || this.selectedRows2[i].scode == 5) {
            this.$message.warning('只用审核中数据才可驳回')
            return
          }
        }
      } else if (val == 3) {
        type = '3'
        for (var i = 0; i < this.selectedRows2.length; i++) {
          if (this.selectedRows2[i].scode != 3) {
            this.$message.warning('只用审核通过数据才可撤销审核')
            return
          }
        }
      }
      let param = {
        ids: ids,
        type: type
      }

      that.confirmLoading = true
      postAction(this.url.passurl, param).then(res => {
        console.log(res)
        if (res.success) {
          that.$message.success(res.message)
          that.selectAll(that.selectid)
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })

    }
  }
}
</script>
<style scoped>
/deep/ .ant-table {
  max-height: 200px !important;
}

.box {
  position: relative;
  border: 1px solid #e8e8e8;
}

.box::before {
  content: attr(title);
  position: absolute;
  left: 5%;
  transform: translateX(-50%);
  -webkit-transform: translate(-50%, -50%);
  padding: 0 10px;
  background-color: #fff;
}

/deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 0px;
}

</style>

<style lang="less">
.light-row {
  background-color: #fff;
}

.dark-row {
  background-color: #e9f6fe;
}

.resize-table-th {
  position: relative;

  .table-draggable-handle {
    transform: none !important;
    position: absolute;
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }

  .table-color-dust {
    background-color: #F5222D;
  }
}
</style>
